<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创作中心</title>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/CreatCenter.css">
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 提示框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #fc5531;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel" >提示！！!</h4>
            </div>
            <div class="my-modal-body modal-body" style="font-size: large;font-weight: bold"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 修改专栏框 -->
<div class="modal fade" id="change-column" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ChangeLabel">请输入新专栏名：</h4>
            </div>
            <div class="modal-body">
                <label>
                    <input type="text" class="new-column-name">
                </label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default submit-btn" old_column_name="">提交</button>
                <button type="button" class="btn btn-default close-btn" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 新建专栏 -->
<div class="modal fade" id="add-column" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="new-column">新建专栏：</h4>
            </div>
            <div class="modal-body">
                <label>
                    <input type="text" class="new-column-input" placeholder="请输入创建的专栏名称">
                </label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default new-column-btn">提交</button>
                <button type="button" class="btn btn-default close-btn" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 删除分栏提示框 -->
<div class="modal fade" id="del-column" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: red;color: white;font-weight: bold;text-align: center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="del">！！！提示！！!</h4>
            </div>
            <div class="modal-body" style="font-size: large;font-weight: bold">确定要删除该专栏嘛？(删除之后不会将里面的博客删除)</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default confirm-del-btn" data-dismiss="modal" column_name="">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--删除博客提示框-->
<div class="modal fade" id="del-blog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #a83e2c;color: white;font-weight: bold;text-align: center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="del_content_blog">！！！提示！！!</h4>
            </div>
            <div class="modal-body" style="font-size: large;font-weight: bold">确定要删除该博客吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default confirm-del-blog" data-dismiss="modal" blog_id="">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--删除草稿提示框-->
<div class="modal fade" id="del-draft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #a83e2c;color: white;font-weight: bold;text-align: center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="del_draft_blog">！！！提示！！!</h4>
            </div>
            <div class="modal-body" style="font-size: large;font-weight: bold">确定要删除该草稿吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default confirm-del-draft" data-dismiss="modal" blog_id="">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 移除专栏中博客提示框 -->
<div class="modal fade" id="del-column-blog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #de4c39;color: white;font-weight: bold;text-align: center">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="del_blog">！！！提示！！!</h4>
            </div>
            <div class="modal-body" style="font-size: large;font-weight: bold">确定要从专栏中移除该博客？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default confirm-del-column-blog" data-dismiss="modal" blog_id="">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom" >
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav-title">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">创作中心</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="user-head-icon">
                    <img src="" class="user-head" alt="">
                    <div class="drop-box" style="display: none;">
                        <div class="drop-nickname-box">
                            <div class="drop-nickname">
                            </div>
                            <div style="width: 100%;height: 2px">
                                <hr style="width: 100%;">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--竖导航栏-->
<div class="container">
    <div class="row">
        <div class="col-md-2" >
            <div class="row">
                <div class="col-md-11" style="background-color: white;height: 250px;position: fixed;width:180px">
                    <button class="btn btn-write-blog">
                        <span class="glyphicon glyphicon-pencil write_blog" aria-hidden="true"></span>
                        发布
                    </button>
                    <ul class="nav nav-pills nav-stacked" style="width: 150px;padding-top: 10px;padding-left: 2px">
                        <li class="active nav-Home"><a href="#" >首页</a></li>
                        <li class="nav-content-manage"><a href="#">内容管理</a></li>
                        <li class="nav-column-manage"><a href="#">专栏管理</a></li>
                        <li class="nav-draft"><a href="#">草稿箱</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--首页-->
        <div class="col-md-9 home-page" >
             <!--个人成就-->
            <div class="self-success-box">
                <div class="success-box">
                      <div class="success-title">
                          粉丝数
                      </div>
                    <div class="success-cnt fans-cnt">
                        0
                    </div>
                    <div>
                       <button class="success-btn">昨日无变化</button>
                    </div>
                </div>
                <div class="success-box">
                    <div class="success-title">
                        获赞数
                    </div>
                    <div class="success-cnt support-cnt">
                        0
                    </div>
                    <div>
                        <button class="success-btn">昨日无变化</button>
                    </div>
                </div>
                <div class="success-box">
                    <div class="success-title">
                        评论数
                    </div>
                    <div class="success-cnt comment-cnt">
                        0
                    </div>
                    <div>
                        <button class="success-btn">昨日无变化</button>
                    </div>
                </div>
                <div class="success-box">
                    <div class="success-title">
                        收藏数
                    </div>
                    <div class="success-cnt collection_cnt">
                        0
                    </div>
                    <div>
                        <button class="success-btn">昨日无变化</button>
                    </div>
                </div>

            </div>
            <!--近期文章-->
             <div class="recent-article-box">
                   <div class="recent-article-title-box">
                       <div class="recent-article-title">
                            近期文章
                       </div>
                       <div class="view-more-box">
                           <a class="view-more" href="#">查看更多</a>
                       </div>
                   </div>
                   <div class="recent-article-list">
                        <div class="recent-article-item" blog_id="">
                            <div class="recent-article-left">
                              <div class="recent-article-icon">
                                  博客
                              </div>
                                <div class="recent-article-info">
                                    <div class="recent-article-in-title">
                                        <a href="#">文章标题</a>
                                    </div>
                                    <div class="recent-article-content">
                                        文章内容11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                                    </div>
                                </div>
                            </div>
                            <div class="recent-article-right">
                                <div class="recent-article-comment recent-article-attribute">
                                   <div class="recent-article-comment-info recent-article-in-info">
                                       0
                                   </div>
                                    <div class="recent-article-show">
                                     评论数
                                    </div>
                                </div>
                                <div class="recent-article-support recent-article-attribute">
                                    <div class="recent-article-support-info recent-article-in-info">
                                        0
                                    </div>
                                    <div class="recent-article-show">
                                      点赞数
                                    </div>
                                </div>
                                <div class="recent-article-collection recent-article-attribute">
                                    <div class="recent-article-collection-info recent-article-in-info">
                                        0
                                    </div>
                                    <div class="recent-article-show">
                                      收藏数
                                    </div>
                                </div>
                            </div>
                        </div>
                   </div>
             </div>
        </div>

        <!--内容管理-->
        <div class="col-md-9 content-manage">
              <div class="all-article-box">
                      <div class="all-article-title-box">
                          <div class="all-article-title">
                              查看文章
                          </div>
                      </div>
                       <!--搜索条件-->
                      <div class="search-condition-box">
                            <!--年份选择-->
                            <div class="condition-year-box">
                                <ul class="nav nav-tabs ">
                                    <li role="presentation" class="dropdown year-select">
                                        <a class="dropdown-toggle year-condition" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                            年<span class="caret"></span>
                                        </a>
                                        <ul class="dropdown-menu" style="min-width: 80px">
                                            <li class="year"><a href="#">不限</a></li>
                                            <li class="year"><a href="#">2022</a></li>
                                            <li class="year"><a href="#">2021</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <!--月份选择-->
                            <div class="condition-year-box">
                              <ul class="nav nav-tabs ">
                                  <li role="presentation" class="dropdown year-select">
                                      <a class="dropdown-toggle month-condition" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                          月<span class="caret"></span>
                                      </a>
                                      <ul class="dropdown-menu" style="min-width: 40px">
                                          <li class="month"><a href="#">不限</a></li>
                                          <li class="month"><a href="#">1月</a></li>
                                          <li class="month"><a href="#">2月</a></li>
                                          <li class="month"><a href="#">3月</a></li>
                                          <li class="month"><a href="#">4月</a></li>
                                          <li class="month"><a href="#">5月</a></li>
                                          <li class="month"><a href="#">6月</a></li>
                                          <li class="month"><a href="#">7月</a></li>
                                          <li class="month"><a href="#">8月</a></li>
                                          <li class="month"><a href="#">9月</a></li>
                                          <li class="month"><a href="#">10月</a></li>
                                          <li class="month"><a href="#">11月</a></li>
                                          <li class="month"><a href="#">12月</a></li>
                                      </ul>
                                  </li>
                              </ul>
                          </div>
                            <!--文章类型选择-->
                            <div class="condition-year-box">
                              <ul class="nav nav-tabs ">
                                  <li role="presentation" class="dropdown classic-select">
                                      <a class="dropdown-toggle type-condition" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                          文章类型<span class="caret"></span>
                                      </a>
                                      <ul class="dropdown-menu" style="min-width: 95px">
                                          <li class="type"><a href="#">不限</a></li>
                                          <li class="type"><a href="#">原创</a></li>
                                          <li class="type"><a href="#">转载</a></li>
                                      </ul>
                                  </li>
                              </ul>
                          </div>
                            <!--分类专栏选择-->
                            <div class="condition-year-box">
                              <ul class="nav nav-tabs ">
                                  <li role="presentation" class="dropdown column-select">
                                      <a class="dropdown-toggle column-condition" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                          分类专栏<span class="caret"></span>
                                      </a>
                                      <ul class="dropdown-menu select_column_list" style="min-width: 130px">
                                          <li class="column"><a href="#">测试专栏1</a></li>
                                      </ul>
                                  </li>
                              </ul>
                          </div>
                            <!--关键字输入框-->
                            <div class="input-box">
                                <label>
                                    <input type="text" class="form-control search-input" placeholder="请输入关键词" aria-describedby="basic-addon1">
                                </label>
                            </div>
                            <!--搜索按钮-->
                            <div class="search-btn-box">
                                 <button class="search-btn">搜索</button>
                            </div>
                      </div>

                     <!--博客列表-->
                      <div class="content_blog_list">

                      </div>
              </div>
        </div>

        <!--专栏管理-->
         <div class="col-md-9 column-manage">
                 <div class="column-manage-box">
                      <div class="column-manage-title-box">
                          <div class="column-manage-title">
                              所有专栏
                          </div>
                          <div class="add-column-box">
                              <button class="add-column-btn">新建</button>
                          </div>
                      </div>
                       <div style="width: 100%;height: 1px">
                           <hr style="color: #bcbcbc">
                       </div>
                       <!--专栏列表-->
                       <div class="column-list">
                           <div class="column-item" column_name="专栏1">
                                <div class="column-icon-box">
                                   专栏
                                </div>
                                <div class="column-title">
                                    专栏名1
                                </div>
                                 <div class="column-operation-box">
                                     <div class="operation-manage-box">
                                         <a href="#" class="operation-manage">
                                             管理
                                         </a>
                                     </div>
                                     <div style="color: #bcbcbc;margin-left: 6px">|</div>
                                      <div class="operation-editor-box">
                                          <a href="#" class="operation-editor">
                                             编辑
                                          </a>
                                      </div>
                                     <div style="color: #bcbcbc;margin-left: 6px">|</div>
                                     <div class="operation-del-box">
                                         <a href="#" class="operation-del">
                                            删除
                                         </a>
                                     </div>
                                 </div>
                           </div>
                           <div class="column-item" column_name="专栏1">
                               <div class="column-icon-box">
                                   专栏
                               </div>
                               <div class="column-title">
                                   专栏名1
                               </div>
                               <div class="column-operation-box">
                                   <div class="operation-manage-box">
                                       <a href="#" class="operation-manage">
                                           管理
                                       </a>
                                   </div>
                                   <div style="color: #bcbcbc;margin-left: 6px">|</div>
                                   <div class="operation-editor-box">
                                       <a href="#" class="operation-editor">
                                           编辑
                                       </a>
                                   </div>
                                   <div style="color: #bcbcbc;margin-left: 6px">|</div>
                                   <div class="operation-del-box">
                                       <a href="#" class="operation-del">
                                           删除
                                       </a>
                                   </div>
                               </div>
                           </div>
                       </div>
                 </div>
         </div>

        <!--专栏详细信息-->
        <div class="col-md-9 column-info">
             <div class="column-article-box">
                  <div class="column-article-title-box">
                     <div class="column-name">
                         专栏名
                     </div>
                      <div class="column-article-title">
                          > 管理文章
                      </div>
                  </div>
                  <div style="width: 100%;height: 1px;">
                     <hr style="color: #bcbcbc;">
                 </div>
                 <!--专栏中的文章-->
                 <div class="column-article-list">
                      <div class="column-article-item" blog_id="2">
                          <div class="column-article-icon">
                              博客
                          </div>
                          <div class="column-in-article-title">
                              博客名称
                          </div>
                          <div class="column-article-operation-box">
                               <div class="column-article-operation-view-box">
                                   <a class="column-view-blog" href="#">查看</a>
                               </div>
                               <div style="height: 100%;width: 1px;margin-right: 4px">|</div>
                               <div class="column-article-operation-del-box">
                                   <a href="#">删除</a>
                               </div>
                          </div>
                      </div>
                 </div>
             </div>
        </div>

        <!--草稿箱-->
        <div class="col-md-9 draft-box">
            <div class="draft-in-box">
               <div class="draft-title">
                   <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
                   草稿列表
               </div>
                <div class="draft-list">
                  <div class="draft-item">
                        <div class="draft-left">
                          <div class="draft-icon">
                              草稿
                          </div>
                          <div class="draft-in-title-box">
                            <div class="draft-in-title">
                                文章标题
                            </div>
                             <div class="draft-content">
                                 的非法对算法是否审定非审定非审定非对算法是否对算法审定非审定非审定非审定非风
                             </div>
                          </div>
                        </div>
                        <div class="draft-right">
                           <div class="draft-time">
                               2022-08-05 :10:29:34
                           </div>
                            <div class="draft-operation">
                               <div class="draft-editor">
                                   继续编辑
                               </div>
                                <div class="draft-del">
                                    删除
                                </div>
                            </div>
                        </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(function () {
          /*获取头像*/
          $(".user-head").attr("src",window.localStorage.getItem("avatar"));

          let nav_name=window.localStorage.getItem("CreatCenter");
          $(nav_name).click();
          get_recent_blog();
          get_user_success();

    })

    /*监听滚动条*/
    $(window).scroll(function () {
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
              if($(".nav-content-manage").hasClass("active"))
              if($(".content_blog_item").length%8!==0){
                  return;
              }else{
                   get_content_blog(($(".content_blog_item").length/8));
              }
        }
    })

    /*获取所有博客*/
    function get_content_blog(page_number) {
        let url='http://localhost:8080/articleServlet?action=get_content_blog'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("email"),
                year:$(".year-condition").text(),
                month:$(".month-condition").text(),
                article_type:$(".type-condition").text(),
                article_column:$(".column-condition").text(),
                article_title:$(".search-input").val(),
                page_number:page_number
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            for(let i=0;i<data1.length;i++)
            {
                push_content_blog(data1[i]);
            }
            /*浏览博客*/
            $(".blog_operation_view").click(function () {
                window.open("ViewBlog.html?blog_id="+$(this).parent().parent().parent().attr("blog_id"));
            })
            /*删除博客*/
            $(".blog_operation_del").click(function () {
                $("#del-blog").modal("show");
                $(".confirm-del-blog").attr("blog_id",$(this).parent().parent().parent().attr("blog_id"));
            })
            /*编辑博客*/
            $(".blog_operation_editor").click(function () {
                window.open("EditorBlog.html?blog_id="+$(this).parent().parent().parent().attr("blog_id"));
            })
        })
    }


    /*获取用户成就*/
    function get_user_success() {
        let url='http://localhost:8080/userServlet?action=get_user_success'
        axios({
            method: "GET",
            url:url,
            params: {
                email:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            let data=res['data'];
            $(".fans-cnt").text(data['data']['fans_number']);
            $(".support-cnt").text(data['data']['support_number']);
            $(".collection_cnt").text(data['data']['collection_number']);
            $(".comment-cnt").text(data['data']['comment_number']);
        })
    }

    /*获取近期文章*/
    function get_recent_blog() {
        let url='http://localhost:8080/articleServlet?action=get_recent_blog'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".recent-article-list").empty();
            for(let i=0;i<data1.length;i++){
                push_recent_blog(data1[i]);
            }
            $(".recent-article-in-title").click(function () {
                window.open("ViewBlog.html?blog_id="+$(this).parent().parent().parent().attr("blog_id"));
            })
        })
    }

    /*展示近期博客*/
    function push_recent_blog(data) {
        $(".recent-article-list").append(`<div class="recent-article-item" blog_id=${data['id']}>
            <div class="recent-article-left">
                <div class="recent-article-icon">
                    博客
                </div>
                <div class="recent-article-info">
                    <div class="recent-article-in-title">
                        <a href="#">${data['article_title']}</a>
                    </div>
                    <div class="recent-article-content">
                       ${data['content_text']}
                    </div>
                </div>
            </div>
            <div class="recent-article-right">
                <div class="recent-article-comment recent-article-attribute">
                    <div class="recent-article-comment-info recent-article-in-info">
                        ${data['comment_count']}
                    </div>
                    <div class="recent-article-show">
                        评论数
                    </div>
                </div>
                <div class="recent-article-support recent-article-attribute">
                    <div class="recent-article-support-info recent-article-in-info">
                        ${data['support_count']}
                    </div>
                    <div class="recent-article-show">
                        点赞数
                    </div>
                </div>
                <div class="recent-article-collection recent-article-attribute">
                    <div class="recent-article-collection-info recent-article-in-info">
                        ${data['collection_count']}
                    </div>
                    <div class="recent-article-show">
                        收藏数
                    </div>
                </div>
            </div>
        </div>`);
    }

    /*展示草稿列表*/
    function push_draft_list(data) {
          $(".draft-list").append(`<div class="draft-item" blog_id=${data['id']}>
              <div class="draft-left">
                  <div class="draft-icon">
                      草稿
                  </div>
                  <div class="draft-in-title-box">
                      <div class="draft-in-title">
                         ${data['article_title']}
                      </div>
                      <div class="draft-content">
                         ${data['content_text']}
                      </div>
                  </div>
              </div>
              <div class="draft-right">
                  <div class="draft-time">
                       ${data['create_time']}
                  </div>
                  <div class="draft-operation">
                      <div class="draft-editor">
                          继续编辑
                      </div>
                      <div class="draft-del">
                          删除
                      </div>
                  </div>
              </div>
          </div>`);
    }

    /*获取草稿列表*/
    function get_draft_list() {
        let url='http://localhost:8080/articleServlet?action=get_draft_list'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("email")
            }
        }).then(function (res) {
             console.log(res);
            let data1=res['data']['data'];
            $(".draft-list").empty();
            for(let i=0;i<data1.length;i++){
                push_draft_list(data1[i]);
            }
            /*编辑草稿*/
            $(".draft-editor").click(function () {
                window.open("EditorDraft.html?blog_id="+$(this).parent().parent().parent().attr("blog_id"));
            })
            /*删除草稿*/
            $(".draft-del").click(function () {
                 $("#del-draft").modal("show");
                 $(".confirm-del-draft").attr("blog_id",$(this).parent().parent().parent().attr("blog_id"));
            })
        })
    }

    /*确定删除草稿*/
    $(".confirm-del-draft").click(function () {
        let url='http://localhost:8080/articleServlet?action=del_blog'
        axios({
            method:"GET",
            url:url,
            params:{
                blog_id:$(this).attr("blog_id")
            }
        }).then(function (res) {
            console.log(res);
            alert("成功删除草稿");
            get_draft_list();
        })
    })

     /*确定删除博客*/
     $(".confirm-del-blog").click(function () {
         let url='http://localhost:8080/articleServlet?action=del_blog'
         axios({
             method:"GET",
             url:url,
             params:{
                  blog_id:$(this).attr("blog_id")
             }
         }).then(function (res) {
               console.log(res);
               alert(res.data.message);
               get_content_blog(0);
         })
     })

    /*展示搜索博客的结果*/
     function push_content_blog(data) {
           $(".content_blog_list").append(`<div class="content_blog_item" blog_id=${data['id']}>
               <div class="content_blog_left_box">
                   <div class="content_blog_title">
                       ${data['article_title']}
                   </div>
                   <div class="content_blog_is_original_box">
                       ${data['is_original']}
                   </div>
                   <div class="content_blog_info">
                       点赞
                       <div class="blog_info_support">${data['support_count']}</div>
                       评论
                       <div class="blog_info_comment">${data['comment_count']}</div>
                       收藏
                       <div class="blog_info_collection">${data['collection_count']}</div>
                   </div>
               </div>
               <div class="content_blog_right_box">
                   <div class="blog_create_time">
                      ${data['create_time']}
                   </div>
                   <div class="blog_operation">
                       <div class="blog_operation_icon blog_operation_editor"><a href="#">编辑</a></div>
                       <div class="blog_operation_icon blog_operation_view"><a href="#">浏览</a></div>
                       <div class="blog_operation_icon blog_operation_del"><a href="#">删除</a></div>
                   </div>
               </div>
           </div>`);
     }

      /*根据筛选条件搜索博客*/
     $(".search-btn").click(function () {
         $(".content_blog_list").empty();
           get_content_blog(0);
     })


      /*展示筛选条件中的专栏*/
      function push_select_column(column_name) {
             $(".select_column_list").append(`<li class="column"><a href="#">${column_name}</a></li>`);
      }

      /*选择年份*/
     $(".year").click(function () {
           $(".year-condition").html($(this).text()+ `<span class="caret"></span>`);
     })

    /*选择月份*/
     $(".month").click(function () {
           $(".month-condition").html($(this).text()+ `<span class="caret"></span>`);
     })

      /*选择文章类型*/
      $(".type").click(function () {
            $(".type-condition").html($(this).text()+ `<span class="caret"></span>`);
      })

     /*获取条件筛选中的专栏*/
      function get_select_column() {
          let url='http://localhost:8080/articleServlet?action=get_column_list'
          axios({
              method:"GET",
              url:url,
              params:{
                  email:window.localStorage.getItem("email")
              }
          }).then(function (res) {
              console.log(res);
              let data1=res['data']['data'];
              $(".select_column_list").empty();
              push_select_column("不限");
              for(let i=0;i<data1.length;i++)
              {
                  push_select_column(data1[i]);
              }
              /*选择专栏*/
               $(".column").click(function () {
                     $(".column-condition").html($(this).text()+ `<span class="caret"></span>`);
               })
          })
      }

    /*展示专栏中的文章*/
    function push_column_article(data) {
            $(".column-article-list").append(`<div class="column-article-item" blog_id=${data['id']}>
                <div class="column-article-icon">
                    博客
                </div>
                <div class="column-in-article-title">
                    ${data['article_title']}
                </div>
                <div class="column-article-operation-box">
                    <div class="column-article-operation-view-box">
                        <a class="column-view-blog" href="#">查看</a>
                    </div>
                    <div style="height: 100%;width: 1px;margin-right: 4px">|</div>
                    <div class="column-article-operation-del-box">
                        <a class="column-del-blog" href="#">删除</a>
                    </div>
                </div>
            </div>`);
    }

    /*确定移除专栏中的文章*/
    $(".confirm-del-column-blog").click(function () {
         let blog_id=$(this).attr("blog_id");
         let column_name=$(".column-name").text();
        let url='http://localhost:8080/articleServlet?action=del_column_blog'
        axios({
            method:"GET",
            url:url,
            params:{
                 blog_id:blog_id,
                 column_name:column_name
            }
        }).then(function (res) {
               console.log(res);
               get_column_article(column_name);
        })
    })

    /*获取专栏中的的博客*/
    function get_column_article(column_name) {
        let url='http://localhost:8080/articleServlet?action=get_column_article'
        axios({
            method:"GET",
            url:url,
            params:{
                 column_name:column_name,
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".column-article-list").empty();
            for(let i=0;i<data1.length;i++){
                push_column_article(data1[i]);
            }
            /*查看文章*/
            $(".column-view-blog").click(function () {
                window.open("ViewBlog.html?blog_id="+$(this).parent().parent().parent().attr("blog_id"));
            })
            /*删除文章*/
            $(".column-del-blog").click(function () {
                   $(".confirm-del-column-blog").attr("blog_id",$(this).parent().parent().parent().attr("blog_id"));
                   $("#del-column-blog").modal("show");
            })
        })
    }

    /*竖导航条切换页面*/
    {
        $(".view-more").click(function () {
            $(".nav-content-manage").click();
          })

         $(".nav-Home").click(function () {
             $(".active").removeClass("active");
             $(".nav-Home").addClass("active");
             judeclass();
         })

        $(".nav-content-manage").click(function () {
            $(".year-condition").html("年"+ `<span class="caret"></span>`);
            $(".month-condition").html("月"+ `<span class="caret"></span>`);
            $(".type-condition").html("文章类型"+ `<span class="caret"></span>`);
            $(".column-condition").html("分类专栏"+ `<span class="caret"></span>`);
            $(".search-input").val("");
            $(".content_blog_list").empty();
            get_content_blog(0);
            get_select_column();
            $(".active").removeClass("active");
            $(".nav-content-manage").addClass("active");
            judeclass();
        })
        
        $(".nav-column-manage").click(function () {
            get_column_list();
            $(".active").removeClass("active");
            $(".nav-column-manage").addClass("active");
            judeclass();
        })

        $(".nav-draft").click(function () {
            get_draft_list();
            $(".active").removeClass("active");
            $(".nav-draft").addClass("active");
            judeclass();
        })

        /*切换页面*/
        function judeclass() {
              $(".column-info").hide();
              if($(".nav-Home").hasClass("active")){
                   $(".home-page").show();
              }else{
                   $(".home-page").hide();
              }
              if($(".nav-content-manage").hasClass("active")){
                  $(".content-manage").show();
              }else{
                  $(".content-manage").hide();
              }
              if($(".nav-column-manage").hasClass("active")){
                    $(".column-manage").show();
              }else{
                    $(".column-manage").hide();
              }
              if($(".nav-draft").hasClass("active")){
                    $(".draft-box").show();
              }else{
                   $(".draft-box").hide();
              }
        }
    }

    /*新建专栏按钮*/
    $(".add-column-btn").click(function () {
           $("#add-column").modal("show");
    })

    /*确认新建专栏按钮*/
    $(".new-column-btn").click(function () {
         $("#add-column").modal("hide");
          if($(".new-column-input").val().length===0)
          {
               modal("专栏名不能为空！");
          }else{
               modal("创建成功");
               add_column($(".new-column-input").val());
          }
    })

    /*新建专栏*/
     function add_column(column_name) {
         let url='http://localhost:8080/articleServlet?action=add_column'
         axios({
             method:"GET",
             url:url,
             params:{
                 column_name:column_name,
                 email:window.localStorage.getItem("email")
             }
         }).then(function (res) {
             console.log(res);
             push_column_list(column_name);
         })
     }

    /*展示专栏列表*/
    function push_column_list(column_name) {
            $(".column-list").append(`<div class="column-item" column_name=${column_name}>
                <div class="column-icon-box">
                    专栏
                </div>
                <div class="column-title">
                    ${column_name}
                </div>
                <div class="column-operation-box">
                    <div class="operation-manage-box">
                        <a href="#" class="operation-manage">
                            管理
                        </a>
                    </div>
                    <div style="color: #bcbcbc;margin-left: 6px">|</div>
                    <div class="operation-editor-box">
                        <a href="#" class="operation-editor">
                            编辑
                        </a>
                    </div>
                    <div style="color: #bcbcbc;margin-left: 6px">|</div>
                    <div class="operation-del-box">
                        <a href="#" class="operation-del">
                            删除
                        </a>
                    </div>
                </div>
            </div>`);
    }

    /*删除专栏按钮*/
    $(".operation-del").click(function () {
         /*打开删除专栏提示框*/
         $("#del-column").modal("show");
    })

    /*确认删除专栏*/
    $(".confirm-del-btn").click(function () {
        let url='http://localhost:8080/articleServlet?action=del_column'
        axios({
            method:"GET",
            url:url,
            params:{
                 column_name:$(this).attr("column_name")
            }
        }).then(function (res) {
            console.log(res);
            get_column_list();
        })
    })

    /*确认修改专栏按钮*/
     $(".submit-btn").click(function () {
           if($(".new-column-name").val().length===0)
           {
             modal("专栏名不能为空");
           }else{
               change_column_name($(".new-column-name").val());
               modal("修改成功");
               $(".close-btn").click();
           }
     })

    /*修改专栏名*/
    function change_column_name(column_name) {
        let url='http://localhost:8080/articleServlet?action=change_column_name'
        axios({
            method:"GET",
            url:url,
            params:{
                 old_column_name:$(".submit-btn").attr("old_column_name"),
                 new_column_name:column_name
            }
        }).then(function (res) {
              console.log(res);
              get_column_list();
        })
    }

    /*获取专栏列表*/
    function get_column_list() {
        let url='http://localhost:8080/articleServlet?action=get_column_list'
        axios({
            method:"GET",
            url:url,
            params:{
                email:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            let data1=res['data']['data'];
            $(".column-list").empty();
            for(let i=0;i<data1.length;i++)
            {
                push_column_list(data1[i]);
            }
            /*编辑专栏*/
            $(".operation-editor").click(function () {
                $(".new-column-name").val($(this).parent().parent().parent().attr("column_name"));
                $(".submit-btn").attr("old_column_name",$(this).parent().parent().parent().attr("column_name"));
                $("#change-column").modal("show");
            })
            /*删除专栏按钮*/
            $(".operation-del").click(function () {
                $(".confirm-del-btn").attr("column_name",$(this).parent().parent().parent().attr("column_name"));
                /*打开删除专栏提示框*/
                $("#del-column").modal("show");
            })
            /*管理文章按钮*/
            $(".operation-manage").click(function () {
                $(".column-name").text($(this).parent().parent().parent().attr("column_name"));
                $(".column-manage").hide();
                $(".column-info").show();
                get_column_article($(this).parent().parent().parent().attr("column_name"));
            })
        })
    }

    /*发布博客*/
    $(".write_blog").click(function () {
          location.href="WriteBlogPage.html";
    })


    /*提示框函数*/
    function modal(content) {
        $('.my-modal-body').html(content);
        $("#myModal").modal("show");
    }

    /*logo*/
    $(".navbar-brand").click(function () {
        location.href="Home.html";
    })
</script>
</body>
</html>